<template>
  <div class="login-container">
    <div class="login-card">
      <h2 class="widget-title">登录</h2>
      <el-form
        ref="loginForm"
        :model="form"
        :rules="rules"
        @submit.prevent="handleLogin"
        class="login-form"
      >
        <el-form-item prop="username">
          <el-input
            v-model="form.username"
            placeholder="请输入用户名"
            prefix-icon="User"
            clearable
          />
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="form.password"
            type="password"
            placeholder="请输入密码"
            prefix-icon="Lock"
            show-password
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            native-type="submit"
            :loading="loading"
            class="login-button"
          >
            登录
          </el-button>
        </el-form-item>
        <el-alert
          v-if="error"
          type="error"
          :title="error"
          show-icon
          :closable="false"
          class="error-alert"
        />
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useAuthStore } from '@/stores/auth';
import { ElMessage } from 'element-plus';
import { User, Lock } from '@element-plus/icons-vue';

// 响应式数据
const form = ref({
  username: '',
  password: '',
});
const loading = ref(false);
const error = ref('');
const loginForm = ref(null);

// 表单校验规则
const rules = ref({
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
});

// 路由和状态管理
const router = useRouter();
const authStore = useAuthStore();

// 登录处理
const handleLogin = async () => {
  try {
    await loginForm.value.validate();
    loading.value = true;
    error.value = '';
    
    await authStore.login({
      name: form.value.username,
      password: form.value.password
    });
    
    ElMessage.success('登录成功');
    router.push('/admin');
  } catch (err) {
    console.error('登录错误:', err);
    if (err.response?.data?.message) {
      error.value = err.response.data.message;
    } else {
      error.value = '登录失败，请检查用户名或密码';
    }
    ElMessage.error(error.value);
  } finally {
    loading.value = false;
  }
};
</script>

<style scoped lang="scss">
/* 登录页面容器，确保水平和垂直居中 */
.login-container {
  background: #fafbfc;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px 16px;
}

/* 登录卡片 */
.login-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  padding: 32px 28px;
  max-width: 360px;
  width: 100%;
}

/* 标题 */
.widget-title {
  font-size: 24px;
  font-weight: 700;
  color: #222;
  margin-bottom: 24px;
  text-align: center;
}

/* 表单 */
.login-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* 输入框 */
:deep(.el-input__wrapper) {
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  background: #fff;
  transition: border-color 0.2s ease;
}

:deep(.el-input__inner) {
  font-size: 15px; /* 主页字体 */
  color: #1e293b; /* 主页文字色 */
}

:deep(.el-input__wrapper.is-focus) {
  border-color: #2563eb; /* 主页主题色 */
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2); /* 聚焦光晕 */
}

/* 按钮 */
:deep(.el-button) {
  background: #2563eb;
  border-radius: 6px;
  color: #fff;
  font-weight: 600;
  border: none;
  transition: background 0.2s;
}
:deep(.el-button):hover {
  background: #1d4ed8;
}

/* 错误提示 */
.error-alert {
  margin-top: 16px; /* 与主页 .error-alert 一致 */
}

/* 响应式 */
@media (max-width: 768px) {
  .login-container {
    padding: 16px; /* 主页移动端 */
  }
  .login-card {
    max-width: 90%; /* 适配小屏幕 */
    padding: 16px;
  }
}
</style>